<template>
  <section id="appLeft" class="nav-list" :class="{'show':showLeft}">
    <user-info></user-info>
    <section class="list-ul">
      <router-link class="item" :to="{'name':'List',query:{tab:'all'}}" @click.native="SET_SHOW_MENU">全部</router-link>
      <router-link class="item" :to="{'name':'List',query:{tab:'good'}}" @click.native="SET_SHOW_MENU">精华</router-link>
      <router-link class="item" :to="{'name':'List',query:{tab:'share'}}" @click.native="SET_SHOW_MENU">分享</router-link>
      <router-link class="item" :to="{'name':'List',query:{tab:'ask'}}" @click.native="SET_SHOW_MENU">问答</router-link>
      <router-link class="item" :to="{'name':'List',query:{tab:'job'}}" @click.native="SET_SHOW_MENU">招聘</router-link>
      <router-link class="item line" :to="{'name':'message'}" @click.native="SET_SHOW_MENU">消息</router-link>
      <router-link class="item" :to="{'name':'about'}" @click.native="SET_SHOW_MENU">关于</router-link>
    </section>
  </section>
</template>

<script>
  import userInfo from './isLogin.vue'
  import {mapMutations} from 'vuex'
  export default {
    name: 'appLeft',
    props: ['showLeft'],
    components: {
      userInfo
    },
    methods: {
      ...mapMutations(['SET_SHOW_MENU'])

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  #appLeft{
    width:50%;
    height:100%;
    position: fixed;
    background-color: #ffffff;
    top: 0;
    left: -50%;
    z-index:5;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    .list-ul{
      margin: 0 24px;
      border-top: 1px solid #d4d4d4;
      overflow: hidden;
      padding-top: 9%;
      .item {
        display: block;
        font-size: 0.2rem;
        padding: 9% 0;
        text-align: left;
        text-indent: 1px;
        /*line-height: 15px;*/
        color: #313131;
        font-weight: 700;
        &:last-child {
          margin-bottom: 50px;
        }
        &:before {
          color: #2c3e50;
        }
        &:hover {
          /*text-decoration: underline;*/
        }
      }
      .line {
        border-top: 1px solid #d4d4d4;
      }
    }
    &.show{
      left:0;
    }
  }
</style>
